<template>
  <view class="content">
    <view class="searchBox">
      <u-calendar :show="show" mode="range" @confirm="confirm" @close="show = false" :closeOnClickOverlay="true"
        :minDate="minDate" monthNum="13"></u-calendar>
      <view class="timeBox" @click="show = true">
        <span style="margin-right: 10rpx;">日期</span>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.start_date}}
        </view>
        <view style="margin: 0 10rpx;">
          至
        </view>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.end_date}}
        </view>
      </view>
      <view class="pickerBox">
        <view class="pickerItem" @tap="hourShow = true">
          <view class="lable">
            类型
          </view>
          <view class="frame">
            {{hourText}}
            <image class="lower" src="../../static/img/lower.png" mode=""></image>
          </view>
        </view>
        <view class="pickerItem" @tap="gradeShow = true">
          <view class="lable">
            年级
          </view>
          <view class="frame">
            {{gradeText}}
            <image class="lower" src="../../static/img/lower.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="iptBox">
        <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
        <view class="searchBtn" @tap="statisticsPlan()">
          搜索
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(i,k) in list" :key="k">
        <view class="itemLbox">
          <view class="itemTime">
            <view class="timeNum">
              {{i.day_time}}({{i.start_time}}-{{i.end_time}})
            </view>
            <view class="timeText">
              {{i.week}}
            </view>
          </view>
          <view class="nameBox" v-for="(j,n) in i.teacher_plan_detail" :key="n">
            <image class="account" src="../../static/img/account.png" mode=""></image>
            <view class="">
              {{j.user.username}}
            </view>
            <view class="" style="margin: 0 20rpx;">
              {{j.user.phone}}
            </view>
            <view class="blue" v-if="i.plan_type == 1">
              （ 正式课 ）
            </view>
            <view class="blue" v-if="i.plan_type == 2">
              （ 体验课 ）
            </view>
            <view class="blue" v-if="i.plan_type == 3">
              （ 复习课 ）
            </view>
          </view>
        </view>
        <view class="itemRbox">
          <span class="yellow">{{i.class_hour}}小时</span>
        </view>
      </view>

    </view>

    <view class="tips">
      <view class="tipsLbox">
        注意：
      </view>
      <view class="tipsRbox">
        <view style="color: #666;margin-bottom: 8rpx;">
          总课时: {{statistics.all_hour}}小时，阶段课时:{{statistics.search_hour}}小时
        </view>
        <view>
          体验课时{{statistics.experience_hour}}小时，正式课时{{statistics.formal_hour}} 小时，复习课时 : {{statistics.review_hour}}
        </view>
      </view>
    </view>
    <!-- 课程类型选择器 -->
    <u-picker :show="hourShow" :columns="hourColumns" keyName="label" @confirm="confirmHour"
      @cancel="hourShow = false"></u-picker>
    <!-- 年级选择器 -->
    <u-picker :show="gradeShow" :columns="gradeColumns" @confirm="confirmGrade" @cancel="gradeShow = false"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        minDate: '',
        show: false,
        hourShow: false,
        gradeShow: false,
        hourText: "请选择",
        gradeText: "请选择",
        hourColumns: [
          [{
            label: '正式课',
            // 其他属性值
            id: 1
            // ...
          }, {
            label: '体验课',
            id: 2
          }, {
            label: '复习课',
            id: 3
          }]
        ],
        gradeColumns: [
          ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一', '高二', '高三']
        ],
        info: {
          start_date: '',
          end_date: '',
          plan_type: '',
          search_data: '',
          grade: ''
        },
        statistics: {

        },
        list: []
      };
    },
    onLoad() {
      this.chooseTimed()
      this.getDate()
      this.statisticsPlan()
    },
    methods: {
      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        let minyear = year - 1;
        this.minDate = minyear + '-' + month + '-' + day;
      },

      getDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = currentDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}/${month}/${day}`;
        this.info.start_date = formattedDate
        this.info.end_date = formattedDate
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "/");
        this.info.end_date = e[e.length - 1].replace(/-/g, "/");
        this.show = false
      },
      confirmHour(e) {
        this.hourText = e.value[0].label
        this.info.plan_type = e.value[0].id
        this.hourShow = false
      },
      confirmGrade(e) {
        this.gradeText = e.value[0]
        this.info.grade = e.value[0]
        this.gradeShow = false
      },
      async statisticsPlan() {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/statisticsPlan', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.statistics = res.data
        this.list = res.data.plan_data
      }
    }
  }
</script>

<style lang="scss">
  .content {
    padding-bottom: 200rpx;

    .yellow {
      color: #FF8D1A;
    }

    .blue {
      color: #4E88E6;
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;
        font-size: 21rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .pickerBox {
        font-size: 28rpx;
        height: 55rpx;
        line-height: 55rpx;
        display: flex;
        margin-bottom: 18rpx;

        .pickerItem {
          display: flex;
          flex: 1;

          .frame {
            position: relative;
            width: 240rpx;
            text-align: center;
            margin-left: 9rpx;
            color: #666666;
            border: 2rpx solid #FCF7F7;

            .lower {
              width: 42rpx;
              height: 42rpx;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 10rpx;
            }
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 520rpx;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
        }

        .iptPla {
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }

    .list {
      width: 697rpx;
      height: 112rpx;
      margin: 26rpx auto;

      .item {
        display: flex;
        align-items: center;
        width: 697rpx;
        // height: 112rpx;
        margin-bottom: 12rpx;
        border-radius: 8rpx;
        border: 2rpx solid #ECECEC;
        font-size: 21rpx;
        padding: 20rpx 35rpx 20rpx 20rpx;
        font-size: 21rpx;

        .itemLbox {
          margin-right: auto;


          .itemTime {
            display: flex;
            margin-bottom: 14rpx;

            .timeText {
              color: #333;
              margin-left: 30rpx;
            }
          }

          .account {
            width: 26rpx;
            height: 26rpx;
            margin-right: 8rpx;
          }

          .nameBox {
            display: flex;
            font-size: 17rpx;
            color: #333;
            margin-bottom: 10rpx;
          }
        }

        .itemRbox {
          font-size: 24rpx;
          text-align: right;
        }
      }
    }

    .tips {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 112rpx;
      background: #E0E0E0;
      display: flex;
      align-items: center;
      font-size: 21rpx;
      color: #333;

      .tipsLbox {
        width: 100rpx;
        text-align: right;
        line-height: 112rpx;
        color: #d43030;
      }
    }
  }
</style>